<!-- Background color start -->
<section id="backColor">
    <div class="row">
        <div class="col-md-12 mt-3 mb-1">
            <h4 class="text-uppercase">Blue Grey Background Color</h4>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="card p-1 text-white bg-blue-grey">
                <div class="card-content">
                    <div class="card-body">
                    <div class="float-left">
                        <p class="white mb-0"><strong>Blue Grey Color</strong></p>
                        <p class="card-title">.bg-blue-grey</p>
                    </div>
                    <div class="float-right">
                        <p class="card-title"><small class="float-right">#607D8B</small></p>
                    </div>
                    </div>
               </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6">
            <div class="card mb-1">
                <div class="card-content">
                    <div class="bg-blue-grey bg-lighten-1 height-50"></div>
                    <div class="p-1">
                        <p class="mb-0"><strong>Blue Grey Lighten 1</strong><small class="text-muted float-right">#78909C</small></p>
                        <p class="mb-0">.bg-blue-grey.bg-lighten-1</p>              
                    </div>
                </div>    
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="bg-blue-grey bg-lighten-2 height-50"></div>
                    <div class="p-1">
                        <p class="mb-0"><strong>Blue Grey Lighten 2</strong><small class="text-muted float-right">#90A4AE</small></p>
                        <p class="mb-0">.bg-blue-grey.bg-lighten-2</p>              
                    </div>
                </div>    
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="bg-blue-grey bg-lighten-3 height-50"></div>
                    <div class="p-1">
                        <p class="mb-0"><strong>Blue Grey Lighten 3</strong><small class="text-muted float-right">#B0BEC5</small></p>
                        <p class="mb-0">.bg-blue-grey.bg-lighten-3</p>              
                    </div>
                </div>    
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="bg-blue-grey bg-lighten-4 height-50"></div>
                    <div class="p-1">
                        <p class="mb-0"><strong>Blue Grey Lighten 4</strong><small class="text-muted float-right">#CFD8DC</small></p>
                        <p class="mb-0">.bg-blue-grey.bg-lighten-4</p>              
                    </div>
                </div>    
            </div>
        </div>
        <div class="col-md-6">
            <div class="card mb-1">
                <div class="card-content">
                    <div class="bg-blue-grey bg-darken-1 height-50"></div>
                    <div class="p-1">
                        <p class="mb-0"><strong>Blue Grey Darken 1</strong><small class="text-muted float-right">#546E7A</small></p>
                        <p class="mb-0">.bg-blue-grey.bg-darken-1</p>              
                    </div>
                </div>    
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="bg-blue-grey bg-darken-2 height-50"></div>
                    <div class="p-1">
                        <p class="mb-0"><strong>Blue Grey Darken 2</strong><small class="text-muted float-right">#455A64</small></p>
                        <p class="mb-0">.bg-blue-grey.bg-darken-2</p>              
                    </div>
                </div>    
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="bg-blue-grey bg-darken-3 height-50"></div>
                    <div class="p-1">
                        <p class="mb-0"><strong>Blue Grey Darken 3</strong><small class="text-muted float-right">#37474F</small></p>
                        <p class="mb-0">.bg-blue-grey.bg-darken-3</p>              
                    </div>
                </div>    
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="bg-blue-grey bg-darken-4 height-50"></div>
                    <div class="p-1">
                        <p class="mb-0"><strong>Blue Grey Darken 4</strong><small class="text-muted float-right">#263238</small></p>
                        <p class="mb-0">.bg-blue-grey.bg-darken-4</p>              
                    </div>
                </div>    
            </div>
        </div>
    </div>    
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Blue Grey Palette Classes</h4>
                    <a class="heading-elements-toggle"><i class="la la-ellipsis-v font-medium-3"></i></a>
                    <div class="heading-elements">
                        <ul class="list-inline mb-0">
                            <li><a data-action="collapse"><i class="ft-minus"></i></a></li>
                            <li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
                            <li><a data-action="expand"><i class="ft-maximize"></i></a></li>
                            <li><a data-action="close"><i class="ft-x"></i></a></li>
                        </ul>
                    </div>
                </div>
                <div class="card-content collapse show">
                    <div class="card-body">
                        <p>Blue Grey color palette contains 13 colors: 1 main blue-grey color and 4 lighten colors, 4 darken colors and  4 Accent colors. All colors works perfectly with any bootstrap components, form components or any modern controls, that makes Modern very effective, flexible and configurable.</p>
                        <p class="mt-1"><strong>Please note:</strong> You can use .bg-blue-grey and .btn-blue-grey as main colors, but if you want to use lighten, darken or accent colors, use bg-* bg-lighten-NUMBER for lighten color, bg-* bg-darken-NUMBER for darken color  and bg-* bg-accent-NUMBER for accent colors.</p>
                        </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="table-responsive">
                                <table class="table table-bordeblue-grey">
                                    <thead>
                                        <tr>
                                            <th style="width: 30%;">Class</th>
                                            <th>Description</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td><code>.bg-blue-grey</code></td>
                                            <td>Blue Grey Class for background color.</td>
                                        </tr>
                                        <tr>
                                            <td><code>.bg-blue-grey</code><br><code>.bg-lighten-*</code></td>
                                            <td>For <code>lighten</code> blue-grey background color, this two classes needed. Here *: 1,2,3,4 lighten blue-grey color options.</td>
                                        </tr>
                                        <tr>
                                            <td><code>.bg-blue-grey</code><br><code>.bg-darken-*</code></td>
                                            <td>For <code>darken</code> blue-grey background color, this two classes needed. Here *: 1,2,3,4 darken blue-grey color options.</td>
                                        </tr>
                                        <tr>
                                            <td><code>.bg-blue-grey</code><br><code>.bg-accent-*</code></td>
                                            <td>For <code>accent</code> blue-grey background color, this two classes needed. Here *: 1,2,3,4 accent blue-grey color options.</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>    
            </div>
        </div>
    </div>
</section>
<!-- Background color end -->

<!-- Border color start -->
<section id="borderColor">
    <div class="row">
        <div class="col-md-12 mt-3 mb-1">
            <h4 class="text-uppercase">Blue Grey Border Color</h4>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="card p-1 border-blue-grey">
                <div class="card-content">
                    <div class="card-body">
                    <div class="float-left">
                        <p class="mb-0"><strong>Blue Grey Color</strong></p>
                        <p class="card-title">.border-blue-grey</p>
                    </div>
                        <div class="float-right">
                            <p class="card-title"><small class="float-right">#607D8B</small></p>
                        </div>
                    </div>
                </div>    
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6">
            <div class="card mb-1 border-blue-grey border-lighten-1">
                <div class="card-content">
                    <div class="p-1">
                        <p class="mb-0"><strong>Blue Grey Lighten 1</strong><small class="text-muted float-right">#78909C</small></p>
                        <p class="mb-0">.border-blue-grey.border-lighten-1</p>              
                    </div>
                </div>    
            </div>
            <div class="card mb-1 border-blue-grey border-lighten-2">
                <div class="card-content">
                    <div class="p-1">
                        <p class="mb-0"><strong>Blue Grey Lighten 2</strong><small class="text-muted float-right">#90A4AE</small></p>
                        <p class="mb-0">.border-blue-grey.border-lighten-2</p>              
                    </div>
                </div>    
            </div>
            <div class="card mb-1 border-blue-grey border-lighten-3">
                <div class="card-content">
                    <div class="p-1">
                        <p class="mb-0"><strong>Blue Grey Lighten 3</strong><small class="text-muted float-right">#B0BEC5</small></p>
                        <p class="mb-0">.border-blue-grey.border-lighten-3</p>              
                    </div>
                </div>    
            </div>
            <div class="card mb-1 border-blue-grey border-lighten-4">
                <div class="card-content">
                    <div class="p-1">
                        <p class="mb-0"><strong>Blue Grey Lighten 4</strong><small class="text-muted float-right">#CFD8DC</small></p>
                        <p class="mb-0">.border-blue-grey.border-lighten-4</p>              
                    </div>
                </div>    
            </div>
        </div>
        <div class="col-md-6">
            <div class="card mb-1 border-blue-grey border-darken-1">
                <div class="card-content">
                    <div class="p-1">
                        <p class="mb-0"><strong>Blue Grey Darken 1</strong><small class="text-muted float-right">#546E7A</small></p>
                        <p class="mb-0">.border-blue-grey.border-darken-1</p>              
                    </div>
                </div>    
            </div>
            <div class="card mb-1 border-blue-grey border-darken-2">
                <div class="card-content">
                    <div class="p-1">
                        <p class="mb-0"><strong>Blue Grey Darken 2</strong><small class="text-muted float-right">#455A64</small></p>
                        <p class="mb-0">.border-blue-grey.border-darken-2</p>              
                    </div>
                </div>    
            </div>
            <div class="card mb-1 border-blue-grey border-darken-3">
                <div class="card-content">
                    <div class="p-1">
                        <p class="mb-0"><strong>Blue Grey Darken 3</strong><small class="text-muted float-right">#37474F</small></p>
                        <p class="mb-0">.border-blue-grey.border-darken-3</p>              
                    </div>
                </div>    
            </div>
            <div class="card mb-1 border-blue-grey border-darken-4">
                <div class="card-content">
                    <div class="p-1">
                        <p class="mb-0"><strong>Blue Grey Darken 4</strong><small class="text-muted float-right">#263238</small></p>
                        <p class="mb-0">.border-blue-grey.border-darken-4</p>       
                    </div>
                </div>    
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Blue Grey Border Classes</h4>
                    <a class="heading-elements-toggle"><i class="la la-ellipsis-v font-medium-3"></i></a>
                    <div class="heading-elements">
                        <ul class="list-inline mb-0">
                            <li><a data-action="collapse"><i class="ft-minus"></i></a></li>
                            <li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
                            <li><a data-action="expand"><i class="ft-maximize"></i></a></li>
                            <li><a data-action="close"><i class="ft-x"></i></a></li>
                        </ul>
                    </div>
                </div>
                <div class="card-content collapse show">
                    <div class="border-bottom-grey border-bottom-lighten-5">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="table-responsive">
                                    <table class="table table-bordeblue-grey">
                                        <thead>
                                            <tr>
                                                <th style="width: 30%;">Class</th>
                                                <th>Description</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td><code>.border-blue-grey</code></td>
                                                <td>Blue Grey Class for background color.</td>
                                            </tr>
                                            <tr>
                                                <td><code>.border-blue-grey</code><br><code>.border-lighten-*</code></td>
                                                <td>For lighten blue-grey background color, this two classes needed. Here *: 1,2,3,4 lighten blue-grey color options.</td>
                                            </tr>
                                            <tr>
                                                <td><code>.border-top-blue-grey</code><br><code>.border-top-lighten-*</code></td>
                                                <td>For lighten blue-grey <code>top</code> border. Use this classes if you need to highlight only top border.</td>
                                            </tr>
                                            <tr>
                                                <td><code>.border-bottom-blue-grey</code><br><code>.border-bottom-lighten-*</code></td>
                                                <td>For lighten blue-grey <code>bottom</code> border. Use this classes if you need to highlight only bottom border.</td>
                                            </tr>
                                            <tr>
                                                <td><code>.border-right-blue-grey</code><br><code>.border-right-lighten-*</code></td>
                                                <td>For lighten blue-grey <code>right</code> border. Use this classes if you need to highlight only right border.</td>
                                            </tr>
                                            <tr>
                                                <td><code>.border-left-blue-grey</code><br><code>.border-left-lighten-*</code></td>
                                                <td>For lighten blue-grey <code>left</code> border. Use this classes if you need to highlight only left border.</td>
                                            </tr>
                                            <tr>
                                                <td><code>.border-blue-grey</code><br><code>.border-darken-*</code></td>
                                                <td>For darken blue-grey background color, this two classes needed. Here *: 1,2,3,4 darken blue-grey color options.</td>
                                            </tr>
                                            <tr>
                                                <td><code>.border-top-blue-grey</code><br><code>.border-top-darken-*</code></td>
                                                <td>For darken blue-grey <code>top</code> border. Use this classes if you need to highlight only top border.</td>
                                            </tr>
                                            <tr>
                                                <td><code>.border-bottom-blue-grey</code><br><code>.border-bottom-darken-*</code></td>
                                                <td>For darken blue-grey <code>bottom</code> border. Use this classes if you need to highlight only bottom border.</td>
                                            </tr>
                                            <tr>
                                                <td><code>.border-right-blue-grey</code><br><code>.border-right-darken-*</code></td>
                                                <td>For darken blue-grey <code>right</code> border. Use this classes if you need to highlight only right border.</td>
                                            </tr>
                                            <tr>
                                                <td><code>.border-left-blue-grey</code><br><code>.border-left-darken-*</code></td>
                                                <td>For darken blue-grey <code>left</code> border. Use this classes if you need to highlight only left border.</td>
                                            </tr>
                                            <tr>
                                                <td><code>.border-blue-grey</code><br><code>.border-accent-*</code></td>
                                                <td>For accent blue-grey background color, this two classes needed. Here *: 1,2,3,4 accent blue-grey color options.</td>
                                            </tr>
                                            <tr>
                                                <td><code>.border-top-blue-grey</code><br><code>.border-top-accent-*</code></td>
                                                <td>For accent blue-grey <code>top</code> border. Use this classes if you need to highlight only top border.</td>
                                            </tr>
                                            <tr>
                                                <td><code>.border-bottom-blue-grey</code><br><code>.border-bottom-accent-*</code></td>
                                                <td>For accent blue-grey <code>bottom</code> border. Use this classes if you need to highlight only bottom border.</td>
                                            </tr>
                                            <tr>
                                                <td><code>.border-right-blue-grey</code><br><code>.border-right-accent-*</code></td>
                                                <td>For Accent blue-grey <code>right</code> border. Use this classes if you need to highlight only right border.</td>
                                            </tr>
                                            <tr>
                                                <td><code>.border-left-blue-grey</code><br><code>.border-left-accent-*</code></td>
                                                <td>For accent blue-grey <code>left</code> border. Use this classes if you need to highlight only left border.</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>    
            </div>
        </div>
    </div>
</section>
<!-- Border color end -->

<!-- Text color start -->
<section id="textColor">
    <div class="row">
        <div class="col-md-12 mt-3 mb-1">
            <h4 class="text-uppercase">Blue Grey Text Color</h4>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="card p-1">
                <div class="card-content">
                    <div class="card-body">
                    <div class="float-left">
                        <p class="mb-0"><strong>Blue Grey Color</strong></p>
                        <p class="card-title">.blue-grey</p>
                    </div>
                    <div class="float-right">
                        <p class="card-title mb-0 blue-grey"><small class="float-right">#607D8B</small></p>
                    </div>
                    </div>
                </div>    
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6">
            <div class="card mb-1">
                <div class="card-content">
                    <div class="p-1">
                        <p class="mb-0"><strong>Blue Grey Lighten 1</strong><small class="text-muted float-right blue-grey">#78909C</small></p>
                        <p class="mb-0">.blue-grey.lighten-1</p>     
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="p-1">
                        <p class="mb-0"><strong>Blue Grey Lighten 2</strong><small class="text-muted float-right blue-grey lighten-2">#90A4AE</small></p>
                        <p class="mb-0">.blue-grey.lighten-2</p>       
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="p-1">
                        <p class="mb-0"><strong>Blue Grey Lighten 3</strong><small class="text-muted float-right blue-grey lighten-3">#B0BEC5</small></p>
                        <p class="mb-0">.blue-grey.lighten-3</p>       
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="p-1">
                        <p class="mb-0"><strong>Blue Grey Lighten 4</strong><small class="text-muted float-right blue-grey lighten-4">#CFD8DC</small></p>
                        <p class="mb-0">.blue-grey.lighten-4</p>       
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card mb-1">
                <div class="card-content">
                    <div class="p-1">
                        <p class="mb-0"><strong>Blue Grey Darken 1</strong><small class="text-muted float-right blue-grey darken-1">#546E7A</small></p>
                        <p class="mb-0">.blue-grey.darken-1</p>     
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="p-1">
                        <p class="mb-0"><strong>Blue Grey Darken 2</strong><small class="text-muted float-right blue-grey darken-2">#455A64</small></p>
                        <p class="mb-0">.blue-grey.darken-2</p>     
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="p-1">
                        <p class="mb-0"><strong>Blue Grey Darken 3</strong><small class="text-muted float-right blue-grey darken-3">#37474F</small></p>
                        <p class="mb-0">.blue-grey.darken-3</p>     
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="p-1">
                        <p class="mb-0"><strong>Blue Grey Darken 4</strong><small class="text-muted float-right blue-grey darken-4">#263238</small></p>
                        <p class="mb-0">.blue-grey.darken-4</p>     
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Blue Grey Text Classes</h4>
                    <a class="heading-elements-toggle"><i class="la la-ellipsis-v font-medium-3"></i></a>
                    <div class="heading-elements">
                        <ul class="list-inline mb-0">
                            <li><a data-action="collapse"><i class="ft-minus"></i></a></li>
                            <li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
                            <li><a data-action="expand"><i class="ft-maximize"></i></a></li>
                            <li><a data-action="close"><i class="ft-x"></i></a></li>
                        </ul>
                    </div>
                </div>
                <div class="card-content collapse show">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="table-responsive">
                                <table class="table table-bordeblue-grey">
                                    <thead>
                                        <tr>
                                            <th style="width: 30%;">Class</th>
                                            <th>Description</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td><code>.blue-grey</code></td>
                                            <td>Class for Blue Grey Text color.</td>
                                        </tr>
                                        <tr>
                                            <td><code>.blue-grey</code><br><code>.lighten-*</code></td>
                                            <td>For <code>lighten</code> blue-grey text color, this two classes needed. Here *: 1,2,3,4 for lighten blue-grey color options.</td>
                                        </tr>
                                        <tr>
                                            <td><code>.blue-grey</code><br><code>.darken-*</code></td>
                                            <td>For <code>darken</code> blue-grey text color, this two classes needed. Here *: 1,2,3,4 for darken blue-grey color options.</td>
                                        </tr>
                                        <tr>
                                            <td><code>.blue-grey</code><br><code>.accent-*</code></td>
                                            <td>For <code>accent</code> blue-grey text color, this two classes needed. Here *: 1,2,3,4 for accent blue-grey color options.</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>    
            </div>
        </div>
    </div>
</section>
<!-- Text color end -->